<template>
  <!--  -->
  <section class="cart-section pt-100 pb-70">
    <div class="container">
      <div
        class="product-info-header product-info-header-three product-info-header-borderless"
      >
        <h2>Add To Cart</h2>
        <a
          href="javascript:;"
          class="btn main-btn main-btn-secondary m-0"
          @click="() => $jumpLink('/shop')"
        >
          Back To Shop
        </a>
      </div>
      <div class="cart-table">
        <table>
          <thead>
            <tr>
              <th>
                <input
                  type="checkbox"
                  :checked="allCheckable"
                  @click="checkAllProduct"
                />All
              </th>
              <th>Product Thumb</th>
              <th>Product Name</th>
              <th>Price</th>
              <th>Quantity</th>
              <th>Total</th>
              <th>Remove</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(item, index) in checkCartList" :key="index">
              <tr>
                <td>
                  <input
                    type="checkbox"
                    :checked="item.checkable"
                    @click="checkOneProduct(item.id)"
                  />
                </td>
                <td>
                  <div class="product-table-thumb">
                    <img
                      src="assets/images/products/product-2.png"
                      alt="product"
                    />
                  </div>
                </td>
                <td>{{ item.title }}</td>
                <td class="color-secondary">
                  {{ item.currentPrice }}/<del>{{ item.originalPrice }}</del>
                </td>
                <td>
                  <div class="cart-quantity">
                    <button
                      class="qu-btn dec"
                      @click="
                        item.quantity <= 1
                          ? (item.quantity = 1)
                          : (item.quantity -= 1)
                      "
                    >
                      -
                    </button>
                    <input
                      type="text"
                      class="qu-input"
                      :value="item.quantity"
                      @change="changeQuantity($event, item)"
                    />
                    <button class="qu-btn inc" @click="item.quantity += 1">
                      +
                    </button>
                  </div>
                </td>
                <td class="color-secondary">
                  {{ item.currentPrice * item.quantity }}
                </td>
                <td class="cancel">
                  <a href="javascript:;" @click="deleteProduct(item.id)">
                    <i class="flaticon-delete"></i>
                  </a>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
      <div class="row justify-content-between mt-30">
        <div class="col-sm-6 col-md-7 col-lg-6 pb-30">
          <div class="section-button-group">
            <a
              href="javascript:;"
              class="btn main-btn main-btn-secondary"
              @click="updateList()"
            >
              Update Cart
            </a>
            <a href="#" class="btn main-btn main-btn-secondary coupon-btn"
              >Add Coupon</a
            >
          </div>
        </div>
        <div class="col-sm-6 col-md-5 col-lg-4 pb-30">
          <div class="sub-section-title">
            <h3 class="sub-section-title-heading">Total Cart</h3>
          </div>
          <div class="cart-details">
            <div class="cart-total-box cart-total-box-secondcolor">
              <div class="cart-total-item">
                <h4>Subtotal</h4>
                <p>{{ subTotal }}</p>
              </div>
              <div class="cart-total-item">
                <h4>
                  Vat <span>({{ vat.value }}%)</span>
                </h4>
                <p>{{ subTotal * (vat.value / 100) }}</p>
              </div>
              <div class="cart-total-item">
                <h4>Total</h4>
                <p>{{ subTotal + subTotal * (vat.value / 100) }}</p>
              </div>
            </div>
            <div class="text-end">
              <a
                href="javascript:;"
                class="btn main-btn main-btn-secondary"
                @click="jumpCheckout"
              >
                Checkout
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { Notify } from "quasar";

import { useShopStore } from "src/stores/shop";
const shopStore = useShopStore();

import {
  reactive,
  toRefs,
  computed,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({
  allCheckable: false,
  cartList: computed(() => shopStore.cartList),
  checkCartList: computed(() => {
    return shopStore.cartList.map((item) => {
      item.checkable = false;
      return item;
    });
  }),
  vat: {
    value: 2,
  },
  subTotal: computed(() => {
    var total = 0;
    for (var i = 0, j = data.cartList.length; i < j; i++) {
      total += data.cartList[i].quantity * data.cartList[i].currentPrice;
    }
    return total;
  }),
});
const { allCheckable, cartList, checkCartList, vat, subTotal } = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {});

// 自定义方法
const checkAllProduct = () => {
  data.allCheckable = !data.allCheckable;
  data.checkCartList.forEach((element) => {
    element.checkable = data.allCheckable;
  });
};

const checkOneProduct = (id) => {
  var one = data.checkCartList.find((item) => item.id == id);
  one.checkable = !one.checkable;
  //
  for (var i = 0, j = data.checkCartList.length; i < j; i++) {
    var product = data.checkCartList[i];
    if (product.checkable != true) {
      data.allCheckable = false;
      return;
    } else {
      data.allCheckable = true;
    }
  }
};

const calCartTotal = () => {};

const updateList = () => {
  data.cartList = computed(() => {
    return shopStore.cartList;
  });
};

const changeQuantity = (event, item) => {
  item.quantity = parseInt(event.target.value);
};

const deleteProduct = (id) => {
  // shopStore.$state.cartList = data.cartList.filter((item) => item.id != id);
  data.cartList.splice(
    data.cartList.findIndex((item) => item.id === id),
    1
  );
};

const jumpCheckout = () => {
  if (data.checkCartList.length <= 0) {
    Notify.create("购物车不能为空");
    return;
  }

  var checkoutList = data.checkCartList.filter(
    (item) => item.checkable == true
  );
  proxy.$router.push({
    name: "ShopCheckout",
    params: {
      param: "someValue",
      checkoutListString: JSON.stringify(checkoutList),
    },
  });
};
</script>

<script></script>

<style lang="scss" scoped></style>
